<template>
	<div>
		<div class="container">
			<div class="handle-box">
<!--				<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">-->
<!--					<el-option key="1" label="广东省" value="广东省"></el-option>-->
<!--					<el-option key="2" label="湖南省" value="湖南省"></el-option>-->
<!--				</el-select>-->
				<el-input v-model="query.illegal_behavior" @change="handleSearch(query.illegal_behavior)" placeholder="违法行为" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch(query.illegal_behavior)">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="start_create">新增</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" >

                <el-table-column prop="illegal_behavior" label="违法行为" width="400" align="center" ></el-table-column>
                <el-table-column  width="300" label="法定法则" align="center" >/</el-table-column>
                <el-table-column  width="80" prop="grade" label="档次" align="center"></el-table-column>
                <el-table-column  label="裁量标准"  align="center" >/</el-table-column>
                <el-table-column  label="处罚幅度"  align="center">/</el-table-column>

        <el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="start_edit(scope.row)" >
							修改
						</el-button>
						<el-button text :icon="Delete" class="red" @click="legal_cl_delete(scope.$index,scope.row)" >
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
		</div>

		<!-- 编辑弹出框 -->
    <el-dialog title="修改处罚条例" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="违法行为">
          <el-input v-model="legal_edit.illegal_behavior"></el-input>
        </el-form-item>
        <el-form-item label="法定罚则">
          <el-input type="textarea" v-model="legal_edit.statutory_penalty" rows="20" ></el-input>
        </el-form-item>
          <el-form-item label="具体法则">
              <el-input type="textarea" v-model="legal_edit.specific_rule" rows="3"></el-input>
          </el-form-item>
        <el-form-item label="档次">
          <el-input v-model="legal_edit.grade"></el-input>
        </el-form-item>
        <el-form-item label="裁量标准">
          <el-input type="textarea" autosize v-model="legal_edit.standard"></el-input>
        </el-form-item>
        <el-form-item label="处罚幅度">
          <el-input type="textarea" autosize v-model="legal_edit.penalty_range" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="legal_edit.remark"></el-input>
        </el-form-item>
      </el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="legal_cl_edit(legal_edit.illegal_behavior,legal_edit.standard,legal_edit.penalty_range,
					legal_edit.statutory_penalty,legal_edit.specific_rule,legal_edit.grade,legal_edit.remark,legal_edit.tlc_id)">确 定</el-button>
				</span>
			</template>
		</el-dialog>
    <!-- 创建处罚条例 -->
    <el-dialog title="创建处罚条例" v-model="createVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="违法行为">
          <el-input v-model="legal_edit.illegal_behavior"></el-input>
        </el-form-item>
        <el-form-item label="法定罚则">
          <el-input type="textarea" v-model="legal_edit.statutory_penalty" rows="20"></el-input>
        </el-form-item>
          <el-form-item label="具体法则">
              <el-input type="textarea" v-model="legal_edit.specific_rule" rows="3"></el-input>
          </el-form-item>
        <el-form-item label="档次">
          <el-input v-model="legal_edit.grade"></el-input>
        </el-form-item>
        <el-form-item label="裁量标准">
          <el-input type="textarea" v-model="legal_edit.standard" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="处罚幅度">
          <el-input type="textarea" autosize v-model="legal_edit.penalty_range" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="legal_edit.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="legal_cl_create(legal_edit.illegal_behavior,legal_edit.standard,legal_edit.penalty_range,
					legal_edit.statutory_penalty,legal_edit.specific_rule,legal_edit.grade,legal_edit.remark)">确 定</el-button>
				</span>
      </template>
    </el-dialog>

	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import {
  fetchData_legal_clause,
  fetchData_rule,
  legal_clause_create,
  legal_clause_delete,
  legal_clause_Edit
} from '../api/index';

interface TableItem {
  tlc_id:number
  illegal_behavior: number;
  standard: string;
  penalty_range: string;
  statutory_penalty: string;
  specific_rule:string;
  grade: string;
  remark:string;
}
const legal_edit = reactive({
  tlc_id:0,
  illegal_behavior:'',
  standard: '',
  penalty_range: '',
  statutory_penalty: '',
  grade: '',
  remark:'',
  specific_rule:'',
});


const editVisible = ref(false);
const createVisible = ref(false);
const start_edit = (row:any) =>{
      legal_edit.tlc_id=row.tlc_id;
      legal_edit.illegal_behavior=row.illegal_behavior;
      legal_edit.standard=row.standard;
      legal_edit.penalty_range=row.penalty_range;
      legal_edit.statutory_penalty=row.statutory_penalty;
      legal_edit.grade=row.grade;
      legal_edit.remark=row.remark;
      legal_edit.specific_rule=row.statutory_penalty_abbreviation;
      editVisible.value = true;
}
const legal_cl_edit = (illegal_behavior: number,standard: string,penalty_range: string,statutory_penalty: string,specific_rule:string,grade: string,remark:string,tlc_id:number) =>{
  legal_clause_Edit(illegal_behavior,standard,penalty_range,statutory_penalty,specific_rule,grade,remark,tlc_id).then(res=>{
    if (res.data.message === "success"){
      ElMessage.success('修改成功');
      editVisible.value = false;
      getData();
    }else {
      ElMessageBox.confirm('修改失败', '提示', {
        type: 'warning'
      })
    }
  })

}
const start_create = () =>{
  legal_edit.illegal_behavior='';
  legal_edit.standard='';
  legal_edit.penalty_range='';
  legal_edit.statutory_penalty='';
  legal_edit.grade='';
  legal_edit.remark='';
  createVisible.value = true;
}
const legal_cl_create = (illegal_behavior: number,standard: string,penalty_range: string,statutory_penalty: string,specific_rule:string,grade: string,remark:string) =>{
    if (legal_edit.illegal_behavior.length==0){
        alert("请输入违法行为(案由)")
    }else if(legal_edit.statutory_penalty.length){
        alert("法定罚则不能为空")
    }else if(legal_edit.specific_rule.length==0){
        alert("具体法则不能为空")
    }else{
        legal_clause_create(illegal_behavior,standard,penalty_range,statutory_penalty,specific_rule,grade,remark).then(res=>{
            if (res.data.message === "success"){
                ElMessage.success('创建成功');
                createVisible.value = false;
                getData()
            } else {
                ElMessageBox.confirm('创建失败', '提示', {
                    type: 'warning'
                })
            }
        })
    }


}
const legal_cl_delete = (index:number,row:any) =>{
  // 二次确认删除
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    legal_clause_delete(row.tlc_id).then(res=>{
      if (res.data.message === "success"){
        tableData.value.splice(index, 1);
        getData();
        ElMessage.success('删除成功');

      }else {
        ElMessageBox.confirm('删除失败', '提示', {
          type: 'warning'
        })
      }
    })
      })
      .catch(() => {});
}


const query = reactive({
  illegal_behavior: '',
    pageIndex: 1,
    pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const tableList = ref<TableItem[]>([]); // 用于存放分页数据的列表
const pageTotal = ref(0);
// 获取表格数据
const getData = (illegal_behavior:string='',standard:string='',grade:string='',tlc_id:number) => {
  fetchData_legal_clause(illegal_behavior, standard,grade,tlc_id).then(res =>{
        tableList.value = [];
		tableData.value = res.data.data;
		pageTotal.value = res.data.data.length || 50;
      // 根据页码确定下标位置
      const index: number = query.pageIndex * query.pageSize - query.pageSize;
      for (let i = index; i < index + query.pageSize; i++) {
          // 防止数组下标越界
          if (i <= tableData.value.length - 1) {
              tableList.value.push(tableData.value[i])
          } else {
              // 越界就不再循环
              break;
          }
      }
  });
};
getData();

// 查询操作
const handleSearch = (illegal_behavior:string='') => {
    query.pageIndex = 1;
	getData(illegal_behavior,'','','');
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
    getData();
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			ElMessage.success('删除成功');
			tableData.value.splice(index, 1);
		})
		.catch(() => {});
};

// const saveEdit = () => {
// 	editVisible.value = false;
// 	ElMessage.success(`修改第 ${idx + 1} 行成功`);
// 	tableData.value[idx].name = form.name;
// 	tableData.value[idx].address = form.address;
// };
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.handle-box button{
    background-color: #00a854;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-textarea {
  width: 400px;
}
.dialog-footer button{
    background-color: #00a854;
    color: white;
}
</style>
